<template>
    <div class="py-[60px] bg-[#fff]">
        <div class="max-w-[1200px] mx-auto">
            <div class="flex justify-between">
                <div
                    v-for="(section, sIndex) in sections"
                    :key="sIndex"
                    class="bg-white rounded-[8px] p-[32px] animate-trigger"
                    ref="animateElements"
                >
                    <div class="text-[18px] font-500 mb-[32px]">
                        {{ section.title }}
                    </div>
                    <div class="space-y-[24px]">
                        <div
                            v-for="(item, index) in section.items"
                            :key="index"
                            class="flex items-center gap-[16px] group cursor-pointer"
                        >
                            <div
                                :class="[
                                    'w-[64px] h-[64px] overflow-hidden',
                                    'rounded-[8px]'
                                ]"
                            >
                                <img
                                    :src="item.image"
                                    class="w-full h-full object-cover"
                                />
                            </div>
                            <div class="flex-1">
                                <div
                                    class="text-[16px] font-500 group-hover:text-[#3C8916] transition-colors"
                                >
                                    {{ item.name }}
                                </div>
                                <div
                                    class="text-[14px] text-[#666] mt-[8px] line-clamp-2"
                                >
                                    {{ item.title }}
                                </div>
                                <div
                                    class="text-[14px] text-[#666] mt-[8px] line-clamp-2"
                                >
                                    {{ item.desc }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mt-[32px] flex justify-center">
                        <a-button type="primary" ghost shape="round"
                            >查看更多</a-button
                        >
                        <!-- <div
                            class="inline-flex border-2 border-[#3C8916] rounded-[8px] px-[16px] py-[8px] items-center text-[#3C8916] cursor-pointer group hover:text-[#fff] hover:bg-[#3C8916] transition-all"
                        >
                            <span>查看更多</span>
                        </div> -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useAnimation } from '@/composables/useAnimation'

import nakun from '../../assets/images/home/nakun.png'
import jiangyq from '../../assets/images/home/jiangyq.png'
import jiancha from '../../assets/images/home/jiancha.png'
import pifu from '../../assets/images/home/pifu.png'
import ai_xt from '../../assets/images/home/ai_xt.png'

interface TeamMember {
    image: string
    name: string
    title?: string
    desc: string
}

interface Section {
    title: string
    type: 'expert' | 'elite' | 'equipment'
    items: TeamMember[]
}

const sections = ref<Section[]>([
    {
        title: '专家团队/ EXPERT TEAM',
        type: 'expert',
        items: [
            {
                image: 'https://oss.acehls.com/obj/yujinxiong.png',
                name: '余金雄/博士',
                title: '长寿领域顶尖华人科学家',
                desc: '长寿领域顶尖华人科学家...'
            },
            {
                image: 'https://oss.acehls.com/obj/gaoxiufeng.png',
                name: '高秀峰/教授',
                title: '四川大学华西基础医学院教授',
                desc: '四川大学博士生导师...'
            },
            {
                image: 'https://oss.acehls.com/obj/lujia.png',
                name: '陆嘉/主治医师',
                title: '分子营养应用资深专家',
                desc: '代谢综合征营养调理专家...'
            }
        ]
    },
    {
        title: '精英团队/ ELITE TEAM',
        type: 'elite',
        items: [
            {
                image: 'https://oss.acehls.com/obj/zq.png',
                name: '詹青/金牌抗衰专家',
                title: '重庆医科大学',
                desc: '抗衰老科研医生...'
            },
            {
                image: nakun,
                name: '马斌/金牌营养研究员',
                title: '英国利兹大学营养学硕士',
                desc: '卡迪夫大学生物制药硕士生...'
            },
            {
                image: jiangyq,
                name: '姜勇强/金牌健康讲师',
                title: '国家高级健康管理师',
                desc: '国家高级公共营养师...'
            }
        ]
    },
    {
        title: '设备介绍/ EQUIPMENT INTRODUCTION',
        type: 'equipment',
        items: [
            {
                image: jiancha,
                name: '鹰眼健康筛查系统',
                title: '全方位扫描',
                desc: '分析身体健康状况...'
            },
            {
                image: pifu,
                name: '慧镜皮肤检测仪',
                title: '3D人脸模型',
                desc: 'PL优化技术...'
            },
            {
                image: ai_xt,
                name: 'AI智能分析系统',
                title: '分析心跳变异程度(HRV)',
                desc: '分析出您的压力指数...'
            }
        ]
    }
])

const { animateElements } = useAnimation()

defineExpose({
    getAnimateElements: () => animateElements.value
})
</script>

<style lang="less" scoped>
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.animate-trigger {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.animate-in {
    opacity: 1;
    transform: translateY(0);
}

// 为每个卡片添加不同的延迟
.animate-trigger:nth-child(1) {
    transition-delay: 0.1s;
}

.animate-trigger:nth-child(2) {
    transition-delay: 0.3s;
}

.animate-trigger:nth-child(3) {
    transition-delay: 0.5s;
}
</style>
